<template>
  <!-- 订单管理 -->
  <div class="main" v-if="tableData">
    <app-link :name="title"></app-link>
    <div>
      <!--//搜索订单-->
      <el-form :inline="true" :model="SearchOrder" class="demo-form-inline">
        <el-form-item label="商品ID">
          <el-input v-model="SearchOrder.goodsId" placeholder="请输入商品ID"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="SearchOrder.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearchOrder">查询</el-button>
          <el-button type="primary" @click="resetOSearch">重置</el-button>
          <el-button type="primary" @click="addOrder">增加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--//订单表格-->
    <template>
      <el-table :data="tableData" style="width: 100%" height="430">
        <el-table-column prop="cid" label="购物车序号" width="150"></el-table-column>
        <el-table-column prop="goodsId" label="商品ID" width="120"></el-table-column>
        <el-table-column prop="username" label="用户名" wusernameidth="120"></el-table-column>
        <el-table-column prop="num" label="数量" wusernameidth="120"></el-table-column>
        <el-table-column fixed="right" label="用户编辑" width="120">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click="modifyOrders(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteOrders(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!--分页-->
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
    <!--对话框-->
    <el-dialog :title="isadd?'增加订单':'修改订单'" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="商品ID" :label-width="formLabelWidth">
          <el-input v-model="form.goodsId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户编辑" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth">
          <el-input v-model="form.num" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="isadd?addOrders():setOrders()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  </div>
</template>

<script>
import ordersApi from "@/api/ordersApi";
import { getUser } from "@/utils/auth";
import appLink from "@/components/link";
export default {
  data() {
    return {
      title: "订单管理",
      SearchOrder: {
        username: "",
        goodsId: ""
      },
      isadd: true,
      tableData: null,
      currentPage1: 1,
      total: null,
      //pageSize一页多少条
      paga: 1,
      pageSize: 6,

      //修改信息
      dialogFormVisible: false,
      form: {
        goodsId: "",
        username: "",
        num: ""
      },
      cid: null,
      formLabelWidth: "120px"
    };
  },

  components: { appLink },

  methods: {
    //获取购物车商品列表
    async getAllcartlist() {
      let p = await ordersApi.getAllcartlist(this.paga, this.pageSize);
      console.log(p);
      if (p.data.flag) {
        this.tableData = p.data.data;
        this.total = p.data.data2;
      }
    },
    //搜索商品
    async onSearchOrder() {
      let p = await ordersApi.getAllcartlist(
        this.paga,
        this.pageSize,
        this.SearchOrder.goodsId,
        this.SearchOrder.username
      );
      if (p.data.flag) {
        this.tableData = p.data.data;
        this.total = p.data.data2;
      }
    },
    //resetOSearch重置表单
    resetOSearch() {
      this.SearchOrder = {
        username: "",
        goodsId: ""
      };
    },
    //新增表单addOrder(打开模拟框)
    addOrder() {
      this.isadd = true;
      this.dialogFormVisible = true;
    },
    //修改modifyOrders(打开模拟框)
    modifyOrders(value) {
      this.isadd = false;
      this.dialogFormVisible = true;
      //this.setOrders(value);
      this.cid = value.cid;
      this.form = {
        goodsId: value.goodsId,
        username: value.username,
        num: value.num
      };
    },
    //增加订单
    async addOrders() {
      try {
        let p = await ordersApi.addGoods(
          this.form.goodsId,
          this.form.username,
          this.form.num
        );
        if (p.data.flag) {
          this.$message({
            message: "增加成功",
            type: "success"
          });
          this.dialogFormVisible = false;
        } else {
          this.$message({
            message: "增加失败",
            type: "error"
          });
        }
      } catch (err) {
        this.$message({
          message: "服务器繁忙",
          type: "error"
        });
      }
    },
    //修改订单
    async setOrders() {
      try {
        let p = await ordersApi.setGoods(
          this.form.goodsId,
          this.form.num,
          this.form.username,
          this.cid
        );
        console.log(p);
        if (p.data.flag) {
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.dialogFormVisible = false;
          this.getAllcartlist();
        } else {
          this.$message({
            message: "修改失败",
            type: "error"
          });
        }
      } catch (err) {
        this.$message({
          message: "服务器繁忙",
          type: "error"
        });
      }
    },
    //删除订单
    async deleteOrders(value) {
      try {
        console.log(value.cid);
        let p = await ordersApi.deleteGoods(value.cid);
        console.log(p);
        if (p.data.flag) {
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.onSearchOrder();
          this.dialogFormVisible = false;
        } else {
          this.$message({
            message: "修改失败",
            type: "error"
          });
        }
      } catch (err) {
        this.$message({
          message: "服务器繁忙",
          type: "error"
        });
      }
    },
    //单前页
    handleCurrentChange(val) {
      this.paga = val;
      this.currentPage1 = val;
      this.getAllcartlist();
    }
  },
  created() {
    this.getAllcartlist();
  }
};
</script>

<style scoped>
.el-form {
  margin-top: 20px;
}
</style>